<template>
  <v-image
    @transformend="handleTransformEnd"
    :config="{
      ...config,
      image: image,
      scaleX: scaleX,
      scaleY: scaleY,
    }"
  >
  </v-image>
</template>

<script>

import html2canvas from 'html2canvas';

export default {

  name: 'XRichText',
  props: {
    config: {
      type: Object
    }
  },
  mounted () {
    this.setContent(this.config.content);
  },
  methods: {
    handleTransformEnd (...p) {
      this.$emit('transformend', ...p)
    },
    setContent (content) {
      const element = document.createElement('div');
      document.body.appendChild(element);
      element.innerHTML = content;
      html2canvas(element.childNodes[0]).then(canvas => {
        this.image = canvas;
        document.body.removeChild(element);
      });
    }
  },
  data () {
    return {
      image: null
    };
  },
  computed: {
    scaleX () {
      return 1 / window.devicePixelRatio;
    },
    scaleY () {
      return 1 / window.devicePixelRatio;
    }
  },
  watch: {
    "config.content": {
      async handler (newContent) {
        console.log(newContent, 'newContent');
        this.setContent(newContent);
      }
    }
  }
}
</script>

<style scoped>
</style>